<template>
  <view class="container">
    <!-- 报警列表 -->
    <scroll-view 
      class="alarm-scroll" 
      scroll-y
      :show-scrollbar="false"
    >
      <view 
        v-for="(item, index) in alarmList" 
        :key="index"
        class="alarm-card"  @click="gotoDetail"
      >
        <!-- 状态栏 -->
        <view class="status-bar">
          <uni-icons 
            :type="getIconType(item.type)" 
            :color="statusColorMap[item.status]" 
            size="24"
          />
          <text class="alarm-time">{{ formatTime(item.time) }}</text>
          <view 
            :class="['status-tag', item.status]"
            :style="{backgroundColor: statusColorMap[item.status]+'1a'}"
          >
            {{ statusTextMap[item.status] }}
          </view>
        </view>

        <!-- 报警详情 -->
        <view class="content-box">
          <text class="alarm-title">{{ item.title }}</text>
          <text class="alarm-desc">{{ item.description }}</text>
        </view>

        <!-- 错误代码 -->
        <view class="error-code">
          <text>错误代码: {{ item.code }}</text>
        </view>
      </view>
    </scroll-view>
  </view>
</template>

<script setup>
import { ref } from 'vue'
// import dayjs from 'dayjs'
const gotoDetail = ()=>{
	uni.navigateTo({
		url:"/pages/alarm/alarmDetail/alarmDetail"
	})
}
// 直接使用ref定义报警数据[9,10](@ref)
const alarmList = ref([
  {
    type: 'collision',
    code: 'E02',
    title: '碰撞传感器异常',
    description: '机器在14:30发生碰撞，请检查障碍物',
    status: 'warning',
    time: 1713340800 // 时间戳
  },
  {
    type: 'battery',
    code: 'E13',
    title: '充电异常',
    description: '充电接口接触不良，请清洁触点',
    status: 'error', 
    time: 1713337200
  }
])

// 状态映射配置[10](@ref)
const statusTextMap = {
  warning: '待处理',
  error: '紧急',
  resolved: '已解决'
}

const statusColorMap = {
  warning: '#FF9500',
  error: '#FF3B30',
  resolved: '#4CD964'
}

// 图标类型映射[9](@ref)
const getIconType = (type) => {
  const iconMap = {
    collision: 'alert',
    battery: 'flashlight',
    brush: 'compose'
  }
  return iconMap[type] || 'alert'
}

// 时间格式化[5](@ref)
const formatTime = (timestamp) => {
  // return dayjs(timestamp * 1000).format('MM/DD HH:mm')
  return "2022-1-1"
}
</script>

<style lang="scss">
.container {
  padding: 24rpx;
  background: #f8f9fa;
  min-height: 100vh;
}

.alarm-scroll {
  height: calc(100vh - 88rpx);
}

.alarm-card {
  background: #fff;
  border-radius: 16rpx;
  margin-bottom: 24rpx;
  padding: 24rpx;
  box-shadow: 0 4rpx 12rpx rgba(0,0,0,0.05);
  
  .status-bar {
    display: flex;
    align-items: center;
    margin-bottom: 16rpx;
    
    .alarm-time {
      flex: 1;
      font-size: 24rpx;
      color: #666;
      margin-left: 16rpx;
    }
    
    .status-tag {
      padding: 4rpx 16rpx;
      border-radius: 8rpx;
      font-size: 24rpx;
    }
  }

  .content-box {
    .alarm-title {
      display: block;
      font-size: 32rpx;
      color: #333;
      margin-bottom: 8rpx;
    }
    
    .alarm-desc {
      font-size: 28rpx;
      color: #666;
      line-height: 1.5;
    }
  }

  .error-code {
    margin-top: 16rpx;
    padding-top: 16rpx;
    border-top: 1rpx solid #eee;
    font-size: 24rpx;
    color: #999;
  }
}
</style>